<template>
  <div class="container">
    <!-- 头部的 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3">
        <div class="grid-content bg-l">
          <img src="../../assets/Verification/pal  logo.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-r">
          <div class="bg-box">
            <img src="../../assets/Verification/phone.png" alt="">
          </div>
          <div class="contus">
            <span>全国服务热线</span>
            <font>400-716-2588</font>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标题部分 -->
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p></p>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p>找回密码</p>
        </div>
      </el-col>
    </el-row>
    <!-- steps条 -->
    <el-steps :active="2" align-center finish-status="success" simple
      style="margin-top:52px;width:84%;margin-left:160px">
      <el-step title="填写用户名"></el-step>
      <el-step title="验证身份"></el-step>
      <el-step title="设置新密码"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 中间的框部分 -->
    <!-- <div class="tip-box"> -->
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="账户名:">
        </el-form-item>
        <el-form-item label="手机:">
        </el-form-item>
        <el-form-item label="手机验证码:">
          <el-input v-model="form.code" style="width:250px"></el-input>
          <img class="imgcode" :src="imgcodeSrc">
        <el-button @click="getNewcodeImg()" type="primary" style="margin-left:10px">获取短信验证码</el-button>
        </el-form-item>
        <el-form-item >
        <el-button @click="getoVerification3()" type="primary" style="width:100px">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  <!-- </div> -->

</template>
<script>
export default {
  data() {
    return {
      checked: true,
      active: 0,
      form: {
        name: '',
        code:''
      },
      imgcodeSrc:''
    }
  },

  methods: {
    next() {
      if (this.active++ > 3) this.active = 0
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
          this.$router.push('/registersetp3')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    gotologin() {
      this.$router.push('/login')
    },
    getNewcodeImg(){
    },
    getoVerification3(){
      this.$router.push('/verification3')
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background-color: #eff3f8;
  height: 820px;
}
.row-bg {
  background-color: #f2f2f2;
  box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
}
.bg-l,
.bg-r {
  margin-top: 28px;
  margin-left: 63px;
}
.bg-r {
  width: 100%;
  height: 41px;
  .bg-box {
    float: left;
  }
  .contus {
    float: left;
  }
}
.bg-r img {
  display: inline-block;
  width: 40px;
  height: 41px;
}
span {
  display: block;
  width: 90px;
  height: 15px;
  font-size: 15px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(82, 82, 82, 1);
  margin-top: -3px;
  margin-left: 5px;
}
font {
  display: block;
  height: 19px;
  font-size: 24px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(19, 120, 218, 1);
  line-height: 14px;
  margin-top: 11px;
  margin-left: 5px;
}
p {
  width: 186px;
  height: 18px;
  font-size: 19px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(85, 85, 85, 1);
  line-height: 20px;
  margin-top: 40px;
}
.el-form {
  width: 500px;
  margin: auto;
  margin-top: 120px;
}
.demo-ruleForm {
  margin-top: 0px;
  margin-left: -20px;
}
.tip-box {
  
  img {
    border: 1px dashed #ccc;
    display: inline-block;
    width: 65px;
    height: 65px;
    margin-left: 53px;
  }
  .el-button {
    margin-top: 30px;
    color: red;
  }
}
.tip-box1 {
  width: 100px;
  margin: auto;
  margin-top: 10px;
}
</style>